<%--
  Created by IntelliJ IDEA.
  User: Root404
  Date: 2022/7/14
  Time: 9:43
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <style>
        span{
            color: red;
        }
    </style>
</head>
<body>
<input type="text" id="txt1" placeholder="失焦异步注册1原生态"><span id="sp1"></span>
<br/>
<input type="text" id="txt2" placeholder="失焦异步注册3辛建华"><span id="sp2"></span>
<br/>
<input type="text" id="txt3" placeholder="失焦异步注册3特检版"><span id="sp3"></span>
</br>
<span>异步查询泛型集合
    <input type="text" id="t1" name="user">
    <input type="button" id="bt" value="异步查询泛型集合"> </span>
</br>
<table border="4">
    <tr>
        <th>id</th>
        <th>name</th>
       <%-- <th>sex</th>
        <th>hobby</th>--%>
    </tr>
</table>
<ul id="ul1"></ul>
<ul id="ul2"></ul>
<ul id="ul3"></ul>
<input type="button" id="bt1" value="点我远程加载a"> </span>
<form id="ff" method="get">
    <input type="text" name="name">
    <input type="password" name="pwd">
    <input type="button" id="bb" value="异步注册">
</form>
<script src="../js/jquery.js"></script>
<script>
    //表单序列化
    $("#bb").click(function () {
        $.get(
            "${pageContext.request.contextPath}/ServletAjax?op=f",
            $("#ff").serialize(),//打包走
            function (data) {
                if(data=="yes"){
                    $("#sp1").html("已注册成功");
                }else{
                    $("#sp1").html("失败");
                }
            }
        );
    });
    //书上的
    const getJSON151 = function(url) {
        const promise = new Promise(function(resolve, reject){
            const handler = function() {
                if (this.readyState !== 4) { return; }
                if (this.status === 200) { resolve(this.response);
                } else { reject( new Error(this.statusText)); }
            };
            const client = new XMLHttpRequest();
            client.open("GET", url);
            client.onreadystatechange = handler;
            client.responseType = "json";
            client.setRequestHeader("Accept", "application");
            client.send();
        });
        return promise;
    };
    $("#bt").click(function () {
        var name=$("#t1").val();
        getJSON151("${pageContext.request.contextPath}/ServletAjax?op=findJson&name="+name)
            .then(function (json) {
                $.each(json,function () {
                    var li="<li>"+this.name+"</li>";
                    $("#ul1").append(li);
                })
            },function (error) {
                alert("异步错误")
            });
    });
    /*//getJson
    $("#bt").click(function () {
        var name=$("#t1").val();
      $.getJSON( "${pageContext.request.contextPath}/ServletAjax?op=findJson&name="+name,//+"&id="+id
      function (json) {
            $.each(json,function () {
                 var li="<li>"+this.name+"</li>";
                 $("#ul1").append(li);
            })
      });
    });*/

    //load
  $("#bt1").click(function () {
        $("#ul3").load("a.jsp");
  });

//get
$("#txt1").blur(function () {
    var name=$(this).val();
    $.get(//异步校验
        "${pageContext.request.contextPath}/ServletAjax?op=find1&name="+name,
        function (data) {
            if(data=="yes"){
                $("#sp1").html("已注册");
            }else{
                $("#sp1").html("可以注册");
            }
        }
    );
});
</script>
</body>
</html>
